<template>
	<div class="java-index" >
		<div class="pic-swip" :index="msg">
			<md-card>
					<md-card-media>
								<img src="../assets/Pic3.jpg" />
					    </md-card-media>
					</md-card>

		</div>
		<div class="nav-bot">
			<span @click="openClass"><img  src="../assets/talk1.png" />课程咨询</span>
			<span @click="openJob"><img src="../assets/talk.png"/>就业咨询</span>
		</div>

		<div class="show-pic"  v-bind:class="{show:isShow}" @click="closePic">
			<img ref="showpic" src="../assets/pict.gif" />
		</div>
		<div class="details">
			<div class="c-banner">
				<div class="c-ban-text">
					<p style="margin-top: 30px;">本课程体系</p>
					<p style="font-size: 20px;">特点与发展前景</p>
				</div>
				<div class="label-text">
					<span>Linux后台开发</span>
					<span>技术成长快</span>
					<span>分布式存储</span>
					<span>C++游戏</span>
					<span>大数据</span>
					<span>工资高</span>
					<span>高并发</span>
					<span>linux内核驱动</span>
					<span>网络游戏</span>
				</div>
			</div>
			<div class="java-konwedge">
				<div :style="{backgroundImage:'url(' + backimg + ')'}" class="java-knowleg-system">
					<p style="margin-bottom:35px ;">
						<span  class=" index-header-span">知识体系</span>
						<br/><br/><span style="font-size: 14px;">测试工程师就业套餐知识体系</span>

					</p>

					<div class="java-line">
						<div>
							<span></span>
						</div>
						<div>
							<span></span>
						</div>

					</div>
					<div class="java-kno-list">
						<div class="java-kno-text">
							<img src="../assets/bg2.png"/>
							<p>C语言</p>
							<p>数据结构基础</p>
							<p>算法</p>
						</div>
						<div class="java-kno-text">
							<img src="../assets/bg2.png" />
							<p>Linux基础开发工具</p>
							<p>C++语言</p>
							<p>STL基础使用</p>
						</div>
					</div>

				</div>
			</div>
			<div class="java-act-item">
				<div class="java-act-text">
					<p class="java-act-header">实战项目</p>
					<div v-for="item in IndexServ">
						<img :src="item"/>

					</div>
				</div>
			</div>
			<div class="java-lesson-act">
				<div class="java-audio-cont">
					<div class="java-audio">
						<video :src="videoUrl" controls="controls"></video>
					</div>
					<p class="java-audio-name">上课实录</p>
					<p class="java-audio-intr">
							{{introduce}}
					</p>

				</div>

			</div>

			<div class="java-ser-list">
				<div class="java-ser-cont">
					<p>
						<span class="java-list-header">为你打造专属服务</span>
						<br/><span style="font-size: 13px;">配套软件测试课程，让你学以致用</span>
					</p>
					<ul>
						<li>
							<img src="../assets/icon 04.svg" />
							<p>
								<span class="li-header">课程精细化学习方案制定</span>
								<br/><span class="li-text">
									介绍服务介绍服务介绍服务介绍服务
									介绍服务介绍服务介绍服务介绍服务
									介绍服务介绍服务介绍服务介绍服务
								</span>
							</p>
						</li>
						<li>
							<img src="../assets/icon 01.svg" />
							<p>
								<span class="li-header">课程精细化学习方案制定</span>
								<br/><span class="li-text">
									介绍服务介绍服务介绍服务介绍服务
									介绍服务介绍服务介绍服务介绍服务
									介绍服务介绍服务介绍服务介绍服务
								</span>
							</p>
						</li>
						<li>
							<img src="../assets/icon 02.svg" />
							<p>
								<span class="li-header">课程精细化学习方案制定</span>
								<br/>
								<span class="li-text">
									介绍服务介绍服务介绍服务介绍服务
									介绍服务介绍服务介绍服务介绍服务
									介绍服务介绍服务介绍服务介绍服务
								</span>
							</p>
						</li>
					</ul>
					<ul>
						<li>
							<img src="../assets/icon 05.svg" />
							<p>
								<span class="li-header">课程精细化学习方案制定</span>
								<br/><span class="li-text">
									介绍服务介绍服务介绍服务介绍服务
									介绍服务介绍服务介绍服务介绍服务
									介绍服务介绍服务介绍服务介绍服务
								</span>
							</p>
						</li>
						<li>
							<img src="../assets/icon 03.svg" />
							<p>
								<span class="li-header">课程精细化学习方案制定</span>
								<br/><span class="li-text">
									介绍服务介绍服务介绍服务介绍服务
									介绍服务介绍服务介绍服务介绍服务
									介绍服务介绍服务介绍服务介绍服务
								</span>
							</p>
						</li>
						<li>
							<img src="../assets/icon 06.svg" />
							<p>
								<span class="li-header">课程精细化学习方案制定</span>
								<br/><span class="li-text">
									介绍服务介绍服务介绍服务介绍服务
									介绍服务介绍服务介绍服务介绍服务
									介绍服务介绍服务介绍服务介绍服务
								</span>
							</p>
						</li>
					</ul>
				</div>
			</div>
			<div class=" c-teacher-team">
				<div class="c-teacher-text">
					<p class="c-teacher-header">
						<span>软件测试金牌讲师团</span>
					</p>
				  <md-card>
						<md-card-media>
					      <!-- swiper -->
					      <swiper :options="swiperOption2">
					        <swiper-slide v-for="item in IndexBt">


							    	<img :src="item[0]" class="tea-pic"  />
							    	<p class="c-tea-name">{{item[1]}}</p>
							    	<p class="c-tea-text">
							    		<span>{{item[2]}}</span>
							    		<br/><span>{{item[3]}}</span>
							    	</p>
							    	<p class="c-tea-intru">
							    		{{item[4]}}
							    	</p>

							    	<span class="c-bar"></span>
					        </swiper-slide>

					       <div class="swiper-pagination" slot="pagination"></div>

					      </swiper>
					    </md-card-media>
					</md-card>

				    <!--<div v-for="item in IndexBt" >
				    	<img :src="item[0]" class="tea-pic"  />
				    	<p class="c-tea-name">{{item[1]}}</p>
				    	<p class="c-tea-job">
				    		<span>{{item[2]}}</span>
				    		<br/><span>{{item[3]}}</span>
				    	</p>
				    	<p class="c-tea-intru">
				    		{{item[4]}}
				    	</p>
				    </div>
-->
				</div>
			</div>

			<div class="java-learner">
				<div class="java-learner-text">
					<p class="java-learner-header">他们曾在比特学习</p>
					<md-card>
						<md-card-media>
					      <!-- swiper -->
					      <swiper :options="swiperOption2">
					        <swiper-slide v-for="item in IndexStudent">


							    	<img :src="item[0]" />
									<p class="java-learner-p">{{item[1]}}</p>
									<p class="java-learner-p" style="color: #666666;">{{item[2]}}</p>


							    	<span class="c-bar2"></span>
					        </swiper-slide>

					       <div class="swiper-pagination" slot="pagination"></div>

					      </swiper>
					    </md-card-media>
					</md-card>

				</div>


			</div>
		</div>
	</div>
</template>
<script>

import {swiper,swiperSide} from 'vue-awesome-swiper'
	export default{
		name:'Cstudy',
		mounted(){
  		this.swipS()
    	},
		data(){
			return {
				backimg:require("../assets/cstudy.jpg"),
				swiperOption:{
					 pagination:'.swiper-pagination',
					 autoplay:true
					},
				 swiperOption2:{
					loop:true,
					 pagination:{
					 	el:'.swiper-pagination',
					 	clickable:true,
					 	},
					 autoplay:true,
					  slidesPerGroup: 2,
					 slidesPerView: 2
					},
				 msg:'111',
				 IndexServ:[],
				 IndexBt:[],
				 IndexStudent:[],
				 introduce:"",
				 page:1,
				 isShow:false
				}

			},
		components:{
				swiper,
				swiperSide
			},
		methods:{
			openClass(){
			    	this.isShow = true;
			    	this.$refs.showpic.src = require("../assets/bg2.png")
			    },
			    openJob(){
			    	this.isShow = true;
			    	this.$refs.showpic.src = require("../assets/pict.gif")
			    },
			    closePic(){
			    	this.isShow = false;
			    },
	    	swipS(){
	    		let self = this;
	    		this.msg = '';
	    		this.$http({
					method:'get',
					url:'/PhoneTest/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					}
				}).then((response)=>{

					self.IndexServ = response.data[1];
					self.introduce = response.data[3];
					self.IndexBt = response.data[4];
					self.IndexStudent = response.data[5];
					self.videoUrl = response.data[2];
				})

			}

   		 }

	}
</script>

<style>
	.nav-bot img{
		width: 30px;
		vertical-align: middle;
		margin-right: 10px;
	}
	.nav-bot span{
		text-align: center;
		display: inline-block;
		float: left;
		width: 50%;
		margin: 0;
		background: white;
		height: 40px;
		font-size: 12px;
		line-height: 40px;
	}
	.show-pic{
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		top: 510px;
		display: none;
		z-index: 10;
	}
	.show{
		display: block!important;
	}
	.show-pic img{
		width: 70%;
		position: relative;
		top: 10px;
		margin-left: 15%;
	}
	button:focus{
		outline: none;
	}
	video{
		width: 100%;
	}
	.java-index{
		position: relative;
		top: 80px;
	}
	.java-learner-header{
		font-size: 16px;
		font-weight:bold;
		 color: #00a8e6;
		 margin:20px 0;
	}
	.java-learner-p{
		padding: 5px;
		width: 90%;
		overflow: hidden;
	}
	.java-learner-text{
		width: 80%;
		display: inline-block;

	}
	.java-learner-text .swiper-container{
		width: 100%;
		height: 260px;
	}
	.java-learner-text .swiper-slide{
		width: 50%!important;
		height: 230px;

		background: white;
	}
	.java-learner-text img{
		width: 100%;
	}
	.java-learner{
		background: #f3f3f3;
		font-size: 12px;
		height: 365px;
		text-align: center;
	}
	.c-bar2{
		display: inline-block;
		position: absolute;
		top: 0px;
		right: 0;
		width: 6px ;
		height: 300px;
		background:#f3f3f3;
	}
	.c-teacher-team .swiper-pagination-bullet-active{
		background: rgba(225,225,225)!important;
	}
	.swiper-container-horizontal > .swiper-pagination-bullets{
		bottom: 0;
	}
	.c-bar{
		display: inline-block;
		position: absolute;
		top: 0px;
		right: 0;
		width: 6px ;
		height: 300px;
		background:#20b8e9;
	}
	.c-teacher-team .swiper-wrapper{
		height: 340px;
	}
	.c-teacher-team .swiper-slide{
		height: 300px;
		background: white;
	}
	.c-teacher-team .swiper-pagination{
		background: rgba(0,0,0,0);
	}
	.c-teacher-header{
		font-weight: bold;
		color: white;
		margin: 20px 0;
	}
	.c-tea-intru{
		font-size: 12px;
		color:#666666;
		height: 80px;
		overflow: hidden;
		border-bottom: 10px solid white;
	}
	.c-tea-text{
		color: #00a8e6;
		font-size: 12px;
		margin-bottom: 5px;
	}
	.c-tea-name{
		font-size: 18px;
		font-weight: bold;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	.c-teacher-text div p{
		text-align: left;
		padding-left: 10px;
		padding-right: 10px;
	}
	.c-teacher-text .swiper-container{

		width: 100%;

		margin-right: 5px;
	}
	.c-teacher-text .swiper-container .swiper-side{
		width: 50%!important;
	}
	.c-teacher-text div img{
		width: 100%;
		height: 100px;
	}
	.c-teacher-text{
		width: 80%;
		display: inline-block;
	}
	.c-teacher-team{
		background:#20b8e9;
		text-align: center;
	}
	.java-ser-header{
		font-weight: bold;
		color:#00a0ff ;
	}
	.java-ser-cont .li-header{
		font-weight: bold;
	}
	.java-ser-cont .li-text{
		font-size: 12px;
		color: #666666;
		position: relative;
		right: 5px;
	}
	.java-ser-cont ul{
		padding: 0;
		list-style: none;
		width: 100%;

	}
	.java-ser-list{
		text-align: center;
	}
	.java-ser-cont li{
		text-align: left;
		position: relative;
		margin-bottom: 10px;
		background: #f3f3f3;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.java-ser-cont li p{
		display: inline-block;
		position: relative;
		left: 100px;
		width: 200px;


	}
	.java-ser-cont ul img{
		width: 90px;
		position: absolute;
		left: 5px;
	}
	.java-ser-cont{
		width: 80%;
		display: inline-block;
		margin-top: 20px;
	}

	.java-audio-intr{
		text-align: left;
		color: white;
		min-height: 50px;
		display: inline-block;
		width: 80%;
		font-size: 12px;

	}
	.java-audio-name{
		font-size: 18px;
		font-weight: bold;
		color: white;
		display: inline-block;
		text-align: left;
		width: 80%;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	.java-audio{
		display: inline-block;
		width: 80%;
		background: white;
		height: 150px;
		margin-top: 20px;
	}
	.java-lesson-act{
	     width: 100%;
	     background:#343434 ;
	     min-height: 250px;
	     margin-top: 20px;
	     text-align: center;
	}
	.java-act-header{
		color: #00a0ff;
		font-weight: bold;
		height: 40px;
	}
	.java-act-text{
		width: 80%;
		display: inline-block;
		margin-top: 20px;
	}
	.java-act-item{
		text-align: center;
	}
	.java-act-text div{
		width: 30%;
		display: inline-block;
		margin-left: 2px;
	}
	.java-act-text img{
		width: 100%;
	}
	.java-kno-list{
		display: inline-block;

		width: 80%;
		text-align: center;

	}
	.java-konwedge{
		height: 342px;
		background: url(../assets/cstudy.jpg);
		color: white;
		width: 100%;
		text-align: center;
		padding-top: 40px;
		margin-top: 20px;
	}
	 .java-kno-text img{
		position: absolute;
		width: 100%;
		height:160px;
		left: 0;
		z-index: 10;
	}
	.java-index .index-header-span{
		font-size: 18px;
	}
	.java-kno-text p{
		position: relative;
		z-index: 20;
		display: inline-block;
		width: 110px;
		height: 28px;
		margin: 0;
		line-height: 28px;
		margin-top: 10px!important;
		overflow: hidden;
		border: solid 1px #8fe2ff;
	}
	.java-kno-list div{
		position: relative;
		display: inline-block;
		font-size: 12px;
		color: white;
		width: 48%;
		z-index: 3;
		height: 160px;
		text-align: center;
	}
	.java-line{
		display: inline-block;
		width: 80%;
		height: 2px;
	    position: relative;
	    top: -30px;
		background: #585d67;
	}
	.java-line div{
		display: inline-block;
		float: left;

		width: 50%;
		height: 6px;
		text-align: center;
	}
	.java-line span{
		display: inline-block;
		width: 8px ;
		position: absolute;
		top: -4px;
		border: 1px solid #585d67;
		height: 8px;
		border-radius: 50% 50%;
		background: #01d6ff;
	}


	.java-index .c-ban{
		height: 284px;
		text-align: center;
	}
	.java-index .c-ban img{
		width: 100%;
		position: relative;
		top:40px;
	}




	.java-index .pic-swip{
		width: 100%;
		height: 470px;
		position: relative;
		top: 0;
	}

	.java-index .pic-swip img{
		width: 100%;
		height: 100%;
	}




</style>
